The change introduces several components - UserMenu, UserMenuAccount, and UserMenuItem to build application forms more easily and according to the latest design guidelines.

Overview

The UserMenu is a layout component that offers a range of options specific to the user and can contain product-specific functionality.

Structure

• UserMenu (ui5-user-menu) is the top-level container component, responsible for the content layout and responsiveness.
• UserMenuAccount (ui5-user-menu-account) represents an account as it can be a currently selected account or one of the other accounts. It contains user's names and can have additional information and an avatar.
• UserMenuItem (ui5-user-menu-item) represents the options in the menu that can have additional submenus.

The basic menu contains the user account of the header area on the top and content below the number of UserMenuItems. And the Sign Out button.

The are also options to a add Manage Account button.

Or to show Other accounts if they are available and ba utton for adding additional accounts.

Responsiveness

The UserMenu component reacts and changes its layout on predefined breakpoints.

• S (<600px)
  Width-Full width
  Height-Full height
• XLL, XL, L, M (≥ 600)
  Width, fixed-320px (20rem)
  Height, min-Hug contents
  Height, max-Screen height-52px(3.25rem) top 16px (1rem) bottom

API

UserMenu

props

• open: boolean //false
• opener: HTMLElement | string //undefined
• showManageAccount: boolean //false
• showOtherAccounts: boolean //false
• showAddAccount: boolean //false

slot

• menuItems!: Array;
• accounts!: Array;

<ui5-user-menu id="userMenuShellBar" show-manage-account show-other-accounts show-add-account>
	<ui5-user-menu-account slot="accounts"
						   avatar-src ="./img/man_avatar_1.png"
						   title-text="Alain Chevalier 1"
						   subtitle-text="[email protected]"
						   description="Delivery Manager, SAP SE"
						   selected>
	</ui5-user-menu-account>
	<ui5-user-menu-account slot="accounts"
						   avatar-initials ="AC"
						   title-text="Alain Chevalier 2"
						   subtitle-text="[email protected]">
	</ui5-user-menu-account>
	<ui5-user-menu-item icon="action-settings" text="Setting" data-id="setting"></ui5-user-menu-item>
	<ui5-user-menu-item icon="globe" text="Product-specific account action" data-id="account-action1"></ui5-user-menu-item>
	<ui5-user-menu-item icon="collaborate" text="Product-specific account action" data-id="account-action2"></ui5-user-menu-item>
	<ui5-user-menu-item icon="official-service" text="Legal Information">
		<ui5-user-menu-item icon="private" text="Private Policy" data-id="privacy-policy"></ui5-user-menu-item>
	</ui5-user-menu-item>
</ui5-user-menu>

UserMenuAccount

props

• avatarSrc?: string //""
• avatarInitials?: string //undefined
• titleText: string //""
• subtitleText: string //""
• description: string //""
• selected: boolean //false

UserMenuItem

Extend MenuItem api.

Test Pages

fiori/test/pages/UserMenu.html